<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  layout: 'tabbar',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'default',
    navigationBarTitleText: '物联云',
    navigationBarBackgroundColor: '#3287e1',
    navigationBarTextStyle:'white',
    enablePullDownRefresh:false
  },
}
</route>

<script lang="ts" setup>
import { ref, toRefs } from 'vue'
import { useToast } from 'wot-design-uni'
import Advice from '@/components/advice.vue'
import ChargeOptions from '@/components/charge-options.vue'
import Kefu from '@/components/kefu.vue'
import Statement from '@/components/statement.vue'

const props = withDefaults(defineProps<{
  sid?: string
  wz?: string
}>(), {
  sid: '',
  wz: '',
})
const toast = useToast()
// 使用 props 来接收路由参数
// 例如：在路由中传递 sid 参数，可以在组件中使用 props 接收
const { sid, wz } = toRefs(props)
// 获取屏幕边界到安全区域距离
// let safeAreaInsets
// let systemInfo

// // #ifdef MP-WEIXIN
// // 微信小程序使用新的API
// systemInfo = uni.getWindowInfo()
// safeAreaInsets = systemInfo.safeArea
//   ? {
//       top: systemInfo.safeArea.top,
//       right: systemInfo.windowWidth - systemInfo.safeArea.right,
//       bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
//       left: systemInfo.safeArea.left,
//     }
//   : null
// console.log('systemInfo', uni.getSystemInfoSync(), 'safeAreaInsets', safeAreaInsets)
// // #endif
const selectedItem = ref<ListItem>({ num: 0, price: 0, id: '' })
const total = ref(100) // 模拟总币数
function decrease() {
  if (selectedItem.value.num > 0) {
    selectedItem.value.num--
    selectedItem.value.price--
  }
}

function increase() {
  if (selectedItem.value.num < total.value) {
    selectedItem.value.num++
    selectedItem.value.price++
  }
}

const show = ref(false)
const actComponent = ref('Statement')
function showBtPopup(active) {
  actComponent.value = active
  show.value = true
}

interface ListItem {
  num: number
  price: number
  id: string
}

const dataList: Array<ListItem> = [
  { price: 1, num: 1, id: 'cz1' },
  { price: 2, num: 2, id: 'cz2' },
  { price: 3, num: 3, id: 'cz3' },
  { price: 5, num: 5, id: 'cz5' },
  { price: 10, num: 10, id: 'cz10' },
  { price: 20, num: 20, id: 'cz20' },
  { price: 30, num: 30, id: 'cz30' },
  { price: 50, num: 50, id: 'cz50' },
] // 模拟充值数据列表

function skip(url) {
  uni.navigateTo({
    url,
  })
}

function confirmTb() {
  if (selectedItem.value.price <= 0) {
    toast.warning('请选择充值金额')
    return
  }
  toast.loading({
    loadingType: 'ring',
    msg: '充值中...',
  })
  setTimeout(() => {
    toast.success('充值成功！')
    uni.navigateTo({
      url: '/pages/result/result',
    })
  }, 2000)
}
</script>

<template>
  <wd-toast />
  <view class="i-page">
    <view class="i-topper">
      <view class="i-left">
        <view class="flex flex-items-end pb-2 text-5 font-500">
          <wd-img :width="30" :height="30" mode="heightFix" src="/static/images/vip.png" />
          <view class="pl-0.5">
            SAAS系统
          </view>
        </view>
        <view class="text-4">
          会员ID：vip8783126356
        </view>
      </view>
      <view class="i-right">
        <wd-img :width="30" :height="30" mode="heightFix" src="/static/images/qb.png" @click="skip('/pages/wallet/wallet')" />
        <!-- <wd-icon name="wallet" size="36px" color="white" /> -->
        <view class="flex flex-items-center text-4" @click="skip('/pages/wallet/wallet')">
          余币：{{ total }}个 <wd-icon name="chevron-right" size="18px" />
        </view>
      </view>
    </view>
    <view class="device w-shadow">
      设备编号：<text class="text-[#07c160] font-bold">
        {{ sid }}
      </text><text v-if="wz" class="text-[#3287e1] font-bold">
        （ {{ wz === '1' ? 'A' : 'B' }} ）
      </text>
    </view>
    <view class="w-shadow i-container">
      <view class="option flex flex-justify-center">
        <view class="option-btn" @click="decrease">
          <wd-icon name="remove" size="22px" />
        </view>
        <view class="box">
          <view class="num-box">
            {{ selectedItem?.price }}
          </view>分 /
        </view>
        <view class="box">
          <view class="num-box">
            {{ selectedItem?.num }}
          </view>币
        </view>
        <view class="option-btn" @click="increase">
          <wd-icon name="add1" size="22px" />
        </view>
      </view>
      <ChargeOptions :list="dataList" @change="item => selectedItem = item" />
    </view>
  </view>
  <view class="submit-btn">
    <wd-button custom-class="custom-shadow" block @click="confirmTb">
      确认金额
    </wd-button>
    <view class="pb-1 pt-6 text-[#3287e1]" @click="show = true">
      <text @click="showBtPopup('Statement')">
        《声明协议》
      </text>/<text @click="showBtPopup('Advice')">
        《投诉建议》
      </text>
    </view>
    <!-- <button
      open-type="contact"
      hover-class="button-hover"
    >
      客服
    </button> -->
    <view>物联云saas系统v1.0.0</view>
  </view>
  <wd-popup v-model="show" position="bottom" closable :safe-area-inset-bottom="true" custom-style="border-radius:10px 10px 0 0;height: 800rpx;">
    <Statement v-if="actComponent === 'Statement'" />
    <Advice v-else />
  </wd-popup>
  <Kefu />
</template>

<style lang="scss">
:deep(){
  .custom-shadow {
    font-size: 28rpx !important;
      box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
      background-color: #4ea2e6 !important;
    }
}
.i-page {
  position: relative;
}
.i-topper {
  padding-bottom: env(safe-area-inset-top);
  background-color: #3287e1;
  background-image: url('http://pay.superiid.com/images/bg.png');
  background-position: left;
  background-repeat: no-repeat;
  background-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  font-size:24rpx;
  padding: 65rpx 30rpx;
}
.device{
  // background-color: #d4edda;
  background-color: #ffffff;
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 4px;
  color: rgb(19, 18, 18);
}
.i-container{
  background-color: #ffffff;
  margin: 20rpx;
  padding: 50rpx 15rpx 30rpx;
  border-radius: 4px;
}
.option {
  padding-bottom: 40rpx;
  .option-btn{
    background-color: #4ea2e6;
    border-radius: 4px;
    padding: 0 20rpx;
    color: #ffffff;
    display: flex;
    align-items: center;
  }
  .box {
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 28rpx;
    .num-box {
      border-radius: 4px;
      border: 1px solid #ececec;
      width: 100rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      margin-right: 6px;
      color: red;
    }
  }
}

.submit-btn {
  position: absolute;
  left: 0;
  bottom: 10rpx;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10%;
  margin-top: 80rpx;
  text-align: center;
  font-size: 28rpx;
  color: #393838;
  padding-bottom: env(safe-area-inset-bottom);
}
</style>
